<template>
  <div>
    <h1>about</h1>
    <h3>{{ count }}</h3>
    <h3>{{ oddOrEven }}</h3>
    <button @click="addNum">触发mutations</button>
    <button @click="jianNum">触发actions当中的方法</button>
    <h3>{{ name }}</h3>
    <button @click="changenameCom">触发模块当中的mutations</button>
    <h3>{{ shopName }}</h3>
    <button @click="changeShopName">更改shopName的值</button>
  </div>
</template>

<script setup>
// this.$store 没有
import { computed } from "@vue/runtime-core";
import { useStore } from "vuex";
const store = useStore();
console.log(store);
// state getters 通过computed获取数据
const count = computed(() => {
  return store.state.count;
});
const oddOrEven = computed(() => store.getters.oddOrEven);

// modules当中的数据获取

const name = computed(() => {
  return store.state.user.name;
});

const shopName = computed(() => {
  return store.state.shop.name;
});
console.log(shopName);
const changeShopName = () => {
  store.commit("changeNameShop");
};
const addNum = () => {
  // 触发mutations当中的add
  store.commit("add", 10);
};

// 触发模块当中的mutations
const changenameCom = () => {
  store.commit("changeName");
};
const jianNum = () => {
  // 触发actions当中方法
  store.dispatch("jian", 5);
};

/* 
vuex

pinia

不一定是每个项目都会用到vuex或者pinia,根据项目的需求而定

选用ts  pinia
选用js  vuex 或pinia

vuex pinia区别



*/
</script>

<style lang="scss" scoped>
</style>